<template>
  <div class="building-list">
    <a-form layout="inline" class="default-search-form gb-flex-form" :form="form" @submit="handleSearch">
      <a-row :gutter="8">
        <a-col :sm="24" :md="12" :lg="8">
          <a-form-item :colon="false" label="对照集名称">
            <a-input v-decorator="['buildingName']" placeholder="对照集名称"/>
          </a-form-item>
        </a-col>
        <a-col :sm="24" :md="12" :lg="8">
          <a-form-item class="gb-search-button">
            <a-button class="item" type="primary" html-type="submit">
              查询
            </a-button>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
     <div class="table-multiple-operations">
      <BuildingForm  class="item" text="构建对照集" :callback="handleSearch" url="" />
    </div>
    <a-table :columns="columns"
      :rowKey="record => record.id"
      :dataSource="data"
      :pagination="pagination"
      :loading="loading"
      size="small"
    >
      <div class="table-single-operations" slot="action" slot-scope="text, record">
        <Delete v-if="funcs['BuildingDelete']" class="item" :text="$t(funcs['BuildingDelete'])" displayType="LINK" :rows="[record]" :callback="handleSearch" url="/backend/building/delete" />
        <BuildingAnalysisView  class="item" text="查看" displayType="LINK" :row="record" :callback="handleSearch"  url="" />
      </div>
    </a-table>
  </div>
</template>

<script>
import common from '@/global/common.js'
import axios from "axios";
import BuildingAnalysisView from "@/components/building/BuildingAnalysisView";
export default {
  components: {BuildingAnalysisView},
  data() {
    return {
      form: this.$form.createForm(this, {name: this._uid}),
      data: [],
      loading: false,
      pagination: { ...common.getPagination() },
      actionWidth: 0,
    }
  },
  computed:{
    funcs() {
      return common.getVisibleFunc('BuildingList')
    },
    columns() {
      const columns = [
        { title: "对照集名称", dataIndex: 'buildingName', key: 'buildingName', width: 100 },
        { title: "样本数", dataIndex: 'sampleCount', key: 'sampleCount', width: 100 },
        { title: "状态", dataIndex: 'statusDesc', key: 'status', width: 100 },
        { title: "创建日期", dataIndex: 'createTime', key: 'createTime', width: 100 },
        { title: "创建人", dataIndex: 'createByDesc', key: 'createByDesc', width: 100 },
        { title: this.$t("action"), key: 'action', scopedSlots: { customRender: 'action' }, width: 100 }
      ]
      return columns
    },
  },
  mounted() {
    this.fetch();
  },
  methods: {
    handleSearch (e) {
      if(e){
        this.pagination.current = 1;
        e.preventDefault();
      }
      this.fetch()
    },
    handleReset () {
      this.form.resetFields();
      this.handleSearch()
    },
    handleActionWidth (data) {
      this.actionWidth = data
    },
    onSelectChange (selectedRowKeys, selectedRows) {
      this.selectedRows = selectedRows
      this.selectedRowKeys = selectedRowKeys
    },
    handleTableChange (pagination, filters, sorter) {
      this.pagination.pageSize = pagination.pageSize
      this.pagination.current = pagination.current
      this.pagination.sortField = ''
      this.pagination.sortOrder = ''
      if (sorter.column) {
        this.pagination.sortField = sorter.columnKey
        this.pagination.sortOrder = sorter.order
      }
      this.fetch({
        ...filters,
      });
    },
    fetch (param = {}) {
      this.form.validateFields((err, formValue) => {
        if (err) {
          return;
        }
        this.loading = true
        this.handleParam(formValue)
        axios({
          url: '/backend/building/find',
          method: 'get',
          params: {
            pageSize: this.pagination.pageSize,
            pageNum: this.pagination.current,
            sortField: this.pagination.sortField,
            sortOrder: this.pagination.sortOrder,
            ...param,
            ...formValue
          },
        }).then((res) => {
          this.pagination.total = res.data.total;
          this.data = res.data.rows;
        }).catch(() => {

        }).finally(() => {
          this.loading = false;
        })
      });
    },
    handleParam(formValue) {
      let createTime = formValue.createTime
      if (createTime && createTime.length > 1) {
        formValue["createTimeStart"] = createTime[0].format('YYYY-MM-DD')
        let endTime = createTime[1]
        formValue["createTimeEnd"] = endTime.format('YYYY-MM-DD')
      }
      delete formValue.createTime
    },
  }
}
</script>